<template>
<!-- 使用根模块state的数据 -->
  <div>
  {{$store.state.username}}
  </div>
  <button @click="fn">改变名字</button>
  <button @click="$store.commit('editname')">改变</button>
  <button @click="$store.dispatch('updatename')">3秒后改变名字</button>
<!-- 使用根模块getters的数据 -->
  <div>{{$store.getters['newname']}}</div>
</template>
<script>
    import {
        useStore
    } from 'vuex'
    export default {
        name: 'App',
        setup() {
            // 使用vuex仓库
            const store = useStore()
                // 使用根模块state的数据
            console.log(store.state.username);
            // 使用根模块getters的数据
            console.log(store.getters.newname);
            // store.commit('editname')
            const fn = () => {
                    // 调用根模块mutations函数
                    store.commit('editname')
                }
                // 调用根模块action函数
                // store.dispatch('updatename')
            return {
                fn
            }
        }
    }
</script>

<style lang="less">

</style>